<template>
  <div class="max-w-7xl mx-auto">
    <div class="mobile-recharge-list-page">
      <div class="box-center flexbox">
        <div class="left">
          <div class="mode">
            <div class="title flexbox flex-align-center">
              <span class="text text-pc">{{ $t('pages.rechargeSku') }}</span>
              <span class="text text-mobile">
                {{ $t('pages.prepaidRefill') }}
              </span>
            </div>
          </div>
          <div class="check">
            <div class="base flexbox flex-align-center flex-justify-between">
              <div class="info">
                <div class="label">{{ $t('formItem.countryRegion') }}</div>
                <div class="input flexbox flex-align-center">
                  <img
                    loading="lazy"
                    class="icon"
                    v-lazy="$globalFn.imgPrefixUrl(checkInfo.counrty.icon)"
                    :alt="checkInfo.counrty.name"
                    :title="checkInfo.counrty.name"
                  />
                  <span class="text">{{ checkInfo.counrty.name }}</span>
                </div>
              </div>
              <div class="info">
                <div class="label">{{ $t('userInfo.phoneNum') }}</div>
                <div class="input flexbox flex-align-center">
                  <span class="prefix">{{ checkInfo.counrty.phone_code }}</span>
                  <span class="text">{{ checkInfo.phone }}</span>
                </div>
              </div>
            </div>
            <div class="provider flexbox flex-align-center">
              <div class="img">
                <img
                  loading="lazy"
                  class="icon object-cover"
                  v-lazy="$globalFn.imgPrefixUrl(checkInfo.provider.logo_url)"
                  :alt="checkInfo.provider.logo_url"
                  :title="checkInfo.provider.logo_url"
                />
              </div>
              <el-select
                class="input flex-1"
                popper-class="provider-option"
                value-key="provider_code"
                filterable
                v-model="checkInfo.provider"
                :placeholder="$t('formPlaceholder.select')"
                @change="changePprovider($event)"
              >
                <el-option v-for="item in providerList" :key="item.provider_code" :label="item.name" :value="item">
                  <div class="provider-item flexbox flex-align-center">
                    <div class="img">
                      <img loading="lazy" class="icon" v-lazy="$globalFn.imgPrefixUrl(item.logo_url)" :alt="item.name" :title="item.name" srcset="" />
                    </div>
                    <span class="name">{{ item.name }}</span>
                  </div>
                </el-option>
              </el-select>
            </div>
            <div class="provider-mobile">
              <div class="provider-box flexbox flex-align-center flex-justify-between flex-1" @click="showskuInfo">
                <div class="left flexbox flex-align-center">
                  <div class="img">
                    <img
                      loading="lazy"
                      class="icon"
                      v-if="checkInfo.provider"
                      v-lazy="$globalFn.imgPrefixUrl(checkInfo.provider.logo_url)"
                      :alt="checkInfo.provider.logo_url"
                    />
                  </div>
                  <div class="info">
                    <div class="name">
                      {{ (checkInfo.provider && checkInfo.provider.name) || '' }}
                    </div>
                    <div class="sku">{{ selectSku.title }}</div>
                  </div>
                </div>
                <img loading="lazy" class="more" src="https://cd.sealmg.com/assets/img/arrow-right-edit.png" alt="arrow-right-edit" srcset="" />
              </div>
            </div>
            <div class="desc" v-if="providerNotice">{{ providerNotice }}</div>
            <div class="total-price">
              <div class="total-box flexbox flex-align-center flex-justify-between">
                <span class="label">{{ $t('formItem.goodsTotalPrice') }}</span>
                <span class="text">{{ selectSku.currency_symbol }}{{ selectSku.price_text || 0 }}</span>
              </div>
            </div>
          </div>
          <div class="pay" v-if="chargeList.length">
            <div class="title">{{ $t('pages.prepaidRefill') }}</div>
            <div class="list flexbox flex-wrap">
              <div
                :class="['item', productType == 1 && selectSku.id == item.id ? 'active' : '', item.stock_num <= 0 ? 'disable' : '']"
                v-for="item in chargeList"
                :key="item.id"
                @click="changeCharge(item)"
              >
                <div class="name">{{ item.title }}</div>
                <!-- <div class="desc">50元人民币</div> -->
                <div class="price flexbox flex-align-center">
                  <span class="origin" v-if="item.line_price_text > 0">{{ item.currency_symbol }}{{ item.line_price_text || 0 }}</span>
                  <span class="now">{{ item.currency_symbol }}{{ item.price_text || 0 }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="pay" v-if="packageList.length">
            <div class="title">{{ $t('pages.dataPacket') }}</div>
            <div class="list flexbox flex-wrap">
              <div
                :class="['item', productType == 2 && selectSku.id == item.id ? 'active' : '', item.stock_num <= 0 ? 'disable' : '']"
                v-for="item in packageList"
                :key="item.id"
                @click="changePackage(item)"
              >
                <div class="name">{{ item.title }}</div>
                <div class="desc">1个月</div>
                <div class="price flexbox flex-align-center">
                  <span class="origin" v-if="item.line_price_text > 0">{{ item.currency_symbol }}{{ item.line_price_text || 0 }}</span>
                  <span class="now">{{ item.currency_symbol }}{{ item.price_text || 0 }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="h-[80px]"></div>
        </div>
        <div class="right">
          <div class="mode">
            <div class="title flexbox flex-align-center">
              <h1 class="text">{{ $t('pages.rechargeInfo') }}</h1>
            </div>
          </div>
          <div class="pay">
            <div class="pay-item country-item">
              <div class="flexbox flex-align-center flex-justify-between flex-1">
                <div class="label">{{ $t('pages.rechargeSku') }}</div>
                <div class="input flexbox flex-align-center">
                  {{ (checkInfo.counrty && checkInfo.counrty.name) || '' }}
                </div>
              </div>
            </div>
            <div class="pay-item">
              <div class="label">{{ $t('orderPage.goodsSpec') }}</div>
              <div class="input flexbox flex-align-center">
                {{ selectSku.title }}
              </div>
            </div>
            <div class="pay-item">
              <div class="label">{{ $t('userInfo.phoneNum') }}</div>
              <div class="input flexbox flex-align-center">
                {{ (checkInfo.counrty && checkInfo.counrty.phone_code) || '' }}
                {{ checkInfo.phone }}
              </div>
            </div>
            <div class="pay-item">
              <div class="label">{{ $t('pages.operator') }}</div>
              <div class="input flexbox flex-align-center">
                {{ checkInfo.provider.name }}
              </div>
            </div>
            <div class="pay-item price-item flexbox flex-align-center flex-justify-between">
              <div class="total">{{ $t('formItem.goodsTotalPrice') }}</div>
              <div class="price">{{ selectSku.currency_symbol }}{{ selectSku.price_text || 0 }}</div>
            </div>
            <div class="handle">
              <el-button class="theme-btn" round :disabled="selectSku.id ? false : true" :loading="btnLoading" @click="submitPayOrder">{{
                $t('formBtn.goPay')
              }}</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-box">
        <div class="handle-box flexbox flex-align-center flex-justify-center">
          <el-button class="theme-btn" :disabled="selectSku.id ? false : true" :loading="btnLoading" @click="submitPayOrder">{{
            $t('formBtn.goPay')
          }}</el-button>
        </div>
      </div>
      <el-drawer class="sku-drawer" title="" :visible.sync="showsku" direction="btt" :show-close="false">
        <!-- :before-close="handleClose" -->
        <div class="sku-cont">
          <div class="title flexbox flex-align-center flex-justify-between">
            <span class="name">{{ $t('pages.rechargeSku') }}</span>
            <img
              loading="lazy"
              class="icon"
              src="https://cd.sealmg.com/assets/img/close-icon.png"
              alt="close-icon"
              title="close-icon"
              srcset=""
              @click="showsku = false"
            />
          </div>
          <div class="content">
            <div class="provider-main flexbox flex-align-center flex-justify-between" @click="showProviderInfo">
              <div class="left flexbox flex-align-center">
                <div class="img">
                  <img
                    loading="lazy"
                    class="icon"
                    v-if="checkInfo.provider"
                    v-lazy="$globalFn.imgPrefixUrl(checkInfo.provider.logo_url)"
                    :alt="checkInfo.provider.logo_url"
                  />
                </div>
                <span class="name">{{ (checkInfo.provider && checkInfo.provider.name) || '' }}</span>
              </div>
              <img loading="lazy" class="arrow" src="https://cd.sealmg.com/assets/img/arrow-right-edit.png" alt="arrow-right-edit" srcset="" />
            </div>
            <div class="tabs flexbox flex-align-center">
              <div :class="['tab', productType == 1 ? 'active' : '']" @click="productType = 1" v-if="chargeList.length">
                {{ $t('pages.prepaidRefill') }}
              </div>
              <div :class="['tab', productType == 2 ? 'active' : '']" @click="productType = 2" v-if="packageList.length">
                {{ $t('pages.dataPacket') }}
              </div>
            </div>
            <el-scrollbar class="list-main" v-if="productType == 1 && chargeList.length">
              <div
                :class="['item', productType == 1 && selectSku.id == item.id ? 'active' : '', item.stock_num <= 0 ? 'disable' : '']"
                v-for="item in chargeList"
                :key="item.id"
                @click="changeCharge(item)"
              >
                <div class="name">{{ item.title }}</div>
                <!-- <div class="desc">50元人民币</div> -->
                <div class="price flexbox flex-align-center">
                  <span class="origin" v-if="item.line_price_text > 0">{{ item.currency_symbol }}{{ item.line_price_text || 0 }}</span>
                  <span class="now">{{ item.currency_symbol }}{{ item.price_text || 0 }}</span>
                </div>
              </div>
            </el-scrollbar>
            <no-data v-if="productType == 1 && chargeList.length == 0" :loading="loading1"></no-data>
            <el-scrollbar class="list-main" v-if="productType == 2 && packageList.length">
              <div
                :class="['item', productType == 2 && selectSku.id == item.id ? 'active' : '', item.stock_num <= 0 ? 'disable' : '']"
                v-for="item in packageList"
                :key="item.id"
                @click="changePackage(item)"
              >
                <div class="name">{{ item.title }}</div>
                <!-- <div class="desc">1个月</div> -->
                <div class="price flexbox flex-align-center">
                  <span class="origin" v-if="item.line_price_text > 0">{{ item.currency_symbol }}{{ item.line_price_text || 0 }}</span>
                  <span class="now">{{ item.currency_symbol }}{{ item.price_text || 0 }}</span>
                </div>
              </div>
            </el-scrollbar>
            <no-data v-if="productType == 2 && packageList.length == 0" :loading="loading2"></no-data>
          </div>
        </div>
      </el-drawer>
      <el-drawer class="provider-drawer" title="" :visible.sync="showprovider" direction="btt" :show-close="false">
        <!-- :before-close="handleClose" -->
        <div class="provider-cont">
          <div class="title flexbox flex-align-center flex-justify-between">
            <span class="name">{{ $t('pages.operator') }}</span>
            <img
              loading="lazy"
              class="icon"
              src="https://cd.sealmg.com/assets/img/close-icon.png"
              alt="close-icon"
              title="close-icon"
              srcset=""
              @click="showprovider = false"
            />
          </div>
          <el-scrollbar class="content" v-if="providerList.length">
            <div class="list-main">
              <div
                :class="[
                  'item flexbox flex-align-center flex-justify-between',
                  checkInfo.provider.provider_code == item.provider_code ? 'active' : ''
                ]"
                v-for="item in providerList"
                :key="item.provider_code"
              >
                <div class="left flexbox flex-align-center">
                  <div class="img">
                    <img loading="lazy" class="icon" v-lazy="$globalFn.imgPrefixUrl(item.logo_url)" :alt="item.logo_url" :title="item.logo_url" />
                  </div>
                  <div class="info">
                    <div class="name">{{ item.name }}</div>
                    <!-- <div class="fee">免手续费</div> -->
                  </div>
                </div>
                <div class="right">
                  <img
                    class="checkbox"
                    v-if="checkInfo.provider.provider_code == item.provider_code"
                    src="https://cd.sealmg.com/assets/img/checkbox-active.png"
                    alt="checkbox-active"
                    loading="lazy"
                    srcset=""
                    @click.stop="changePprovider(item)"
                  />
                  <img
                    class="checkbox"
                    loading="lazy"
                    v-else
                    src="https://cd.sealmg.com/assets/img/checkbox.png"
                    alt="checkbox"
                    srcset=""
                    @click.stop="changePprovider(item)"
                  />
                </div>
              </div>
            </div>
          </el-scrollbar>
          <no-data v-if="providerList.length == 0" :loading="loading"></no-data>
        </div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
  import { throttle } from '@/static/js/common'
  export default {
    layout: 'newsHome',
    name: 'mobileRechargeList',
    key(route) {
      return route.fullPath
    },
    data() {
      return {
        showsku: false,
        showprovider: false,
        checkInfo: {
          counrty: {},
          provider: {},
          phone: ''
        },
        productType: '',
        selectSku: {},
        providerCode: '',
        loading: true,
        providerList: [],
        providerNotice: this.$t('pages.operatorsNotice'),
        chargeList: [],
        loading1: true,
        packageList: [],
        loading2: true,
        btnLoading: false
      }
    },
    created() {
      let query = this.$route.query
      if (query.info) {
        this.checkInfo = JSON.parse(query.info)
        if (this.checkInfo && this.checkInfo.counrty.iso) {
          this.getProvider()
        }
        if (this.checkInfo && this.checkInfo.counrty.iso && this.checkInfo.provider.provider_code) {
          this.providerCode = this.checkInfo.provider.provider_code
          this.getGoodsList()
        }
      }
    },
    methods: {
      getProvider() {
        this.$axios
          .get(`/api/recharge/getProviders?iso=${this.checkInfo.counrty.iso}`)
          .then(res => {
            this.providerList = res
            // this.$axios.get(`/api/recharge/getProductDescriptions?sku_codes=CN_C2_TopUp_7.94`).then(ress=>{
            //
            //     this.providerNotice=ress
            // });
            this.loading = false
          })
          .catch(err => {
            this.loading = false
            this.providerList = []
          })
      },
      changePprovider(item) {
        this.showprovider = false
        if (this.checkInfo.provider.provider_code == item.provider_code) return
        this.checkInfo.provider = item
        this.getGoodsList()
      },
      getGoodsList() {
        this.$axios
          .get(`/api/recharge/getProducts?iso=${this.checkInfo.counrty.iso}&provider_code=${this.checkInfo.provider.provider_code}`)
          .then(res => {
            this.loading1 = false
            this.loading2 = false
            this.chargeList = res.phone_bill || []
            this.packageList = res.data || []
            if (this.chargeList.length) {
              this.selectSku = this.chargeList[0]
              this.productType = 1
            } else if (this.chargeList.length == 0 && this.packageList.length) {
              this.selectSku = this.packageList[0]
              this.productType = 2
            }
          })
          .catch(err => {
            this.loading1 = false
            this.loading2 = false
            this.selectSku = {}
            this.chargeList = []
            this.packageList = []
          })
      },
      changeCharge(item) {
        if (item.stock_num <= 0) return
        this.productType = 1
        this.selectSku = item
        this.showsku = false
      },
      changePackage(item) {
        if (item.stock_num <= 0) return
        this.productType = 2
        this.selectSku = item
        this.showsku = false
      },
      showskuInfo() {
        this.productType = 1
        this.showsku = true
      },
      showProviderInfo() {
        this.showprovider = true
      },
      submitPayOrder: throttle(
        function () {
          if (!this.selectSku.id) return
          //
          let obj = {
            id: this.selectSku.id,
            num: 1,
            info: {
              account: this.checkInfo.phone,
              phone_code: this.checkInfo.counrty.phone_code
            }
          }
          this.btnLoading = true
          this.$axios
            .post('/api/order/create', { goods: [obj] })
            .then(res => {
              this.btnLoading = false
              this.$router.push({
                path: this.localePath('/order/pay'),
                query: {
                  no: res.order_no
                }
              })
            })
            .catch(err => {
              this.btnLoading = false
            })
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      )
    }
  }
</script>
<style lang="less" scoped>
  .mobile-recharge-list-page {
    .box-center {
      .mode {
        box-sizing: border-box;
        width: 793px;
        padding: 20px 24px 11px 24px;
        .title {
          padding-bottom: 8px;
          border-bottom: @border-1-e5;
          .text {
            font-weight: 500;
            font-size: 22px;
            color: @font-color-14;
          }
          .text-pc {
            display: block;
          }
          .text-mobile {
            display: none;
          }
        }
        .label-item {
          margin-bottom: 16px;
          .line {
            width: 5px;
            height: 18px;
            background: @theme-color;
            border-radius: 4px;
          }
          .text {
            margin-left: 8px;
            font-weight: 500;
            font-size: 20px;
            color: @font-color-14;
          }
        }
      }
      .left {
        box-sizing: border-box;
        width: 793px;
        border-radius: 16px;
        .check {
          padding: 20px 24px;
          .base {
            .info {
              .label {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .input {
                box-sizing: border-box;
                padding: 0 16px;
                margin-top: 6px;
                width: 363px;
                height: 48px;
                background: @color-f7;
                border-radius: 8px;
                .icon {
                  width: 24px;
                  height: 24px;
                  border-radius: 50%;
                  margin-right: 8px;
                }
                .prefix {
                  margin-right: 24px;
                  font-family: HelveticaNeue, HelveticaNeue;
                  font-weight: 500;
                  font-size: 16px;
                  color: @font-color-99;
                }
                .text {
                  font-weight: 500;
                  font-size: 16px;
                  color: @font-color-26;
                }
              }
            }
          }
          .provider {
            position: relative;
            margin-top: 40px;
            // padding: 0 20px;
            height: 80px;
            background: @color-f7;
            border-radius: 16px;
            .img {
              position: absolute;
              left: 20px;
              top: 50%;
              width: 56px;
              height: 56px;
              z-index: 1;
              background: @color-ff;
              border-radius: 10px;
              transform: translateY(-50%);
              .icon {
                padding: 3px;
                width: 100%;
                height: 100%;
                overflow: clip;
                box-sizing: border-box;
                object-fit: contain;
                aspect-ratio: 1 / 1;
                background: @color-ff;
                border-radius: 4px;
              }
            }
            /deep/ .el-input__inner {
              padding-left: 88px;
              height: 70px;
              line-height: 70px;
            }
            /deep/ .el-input__suffix {
              right: 36px;
            }
          }
          .provider-mobile {
            display: none;
          }
          .desc {
            margin-top: 8px;
            font-weight: 400;
            font-size: 12px;
            color: @font-color-99;
          }
          .total-price {
            display: none;
          }
        }
        .pay {
          padding: 16px 24px;
          margin-top: 32px;
          .title {
            font-weight: 500;
            font-size: 14px;
            color: @font-color-66;
          }
          .list {
            width: 100%;
            .item {
              box-sizing: border-box;
              width: 362px;
              padding: 16px 20px;
              margin-left: 20px;
              margin-top: 20px;
              background: @color-f7;
              border-radius: 16px;
              cursor: pointer;
              border: @border-1-f7;
              .name {
                font-weight: 500;
                font-size: 16px;
                color: @font-color-26;
              }
              .desc {
                margin-top: 2px;
                font-size: 12px;
                color: @font-color-99;
              }
              .price {
                margin-top: 6px;
                .origin {
                  margin-right: 8px;
                  text-decoration: line-through;
                  font-family: HelveticaNeue, HelveticaNeue;
                  font-weight: 500;
                  font-size: 14px;
                  color: @font-color-66;
                }
                .now {
                  font-family: HelveticaNeue, HelveticaNeue;
                  font-weight: bold;
                  font-size: 16px;
                  color: @theme-color;
                }
              }
            }
            .item:nth-child(2n + 1) {
              margin-left: 0;
            }

            .item.active {
              background: @input-focus-bg;
              border: 1px solid @theme-color;
            }
            .item.disable {
              background: @color-f7;
              cursor: not-allowed;
              border: @border-1-e5;
              .name {
                color: #b3b3b3;
              }
              .price {
                .origin {
                  color: #b3b3b3;
                }
                .now {
                  color: #b3b3b3;
                }
              }
            }
          }
        }
      }
      .right {
        box-sizing: border-box;
        width: 387px;
        margin-left: 20px;
        .mode {
          width: 387px;
        }
        .pay {
          margin-top: 20px;
          padding: 0 24px;
          background: @color-ff;
          .title {
            margin-bottom: 20px;
          }
          .pay-item {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .label {
              // margin-bottom: 6px;
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .input {
              // padding: 0 16px;
              // height: 48px;
              // background: @color-f7;
              // border-radius: 8px;
            }
            .total {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .price {
              font-family: Helvetica, Helvetica;
              font-weight: bold;
              font-size: 24px;
              color: @theme-color;
            }
          }
          .price-item {
            margin-top: 34px;
          }
          .country-item {
            display: none;
          }
          .handle {
            margin-top: 16px;
            padding: 20px 0;
            .theme-btn {
              width: 100%;
              height: 50px;
              line-height: 50px;
            }
          }
        }
      }
    }
    .bottom-box {
      display: none;
    }
  }
  .sku-drawer {
    left: 50%;
    width: 375px;
    transform: translateX(-50%);
    /deep/.el-drawer {
      height: 500px !important;
      border-radius: 16px 16px 0px 0px;
    }
    /deep/.el-drawer__header {
      display: none;
    }
    /deep/.el-drawer__body {
      overflow: hidden;
    }
    .sku-cont {
      border-radius: 16px 16px 0px 0px;
      .title {
        padding: 0 16px;
        height: 52px;
        .name {
          font-weight: 500;
          font-size: 16px;
          color: @font-color-14;
        }
        .icon {
          width: 20px;
          height: 20px;
        }
      }
      .content {
        padding: 16px;
        .provider-main {
          padding: 0 16px;
          height: 48px;
          background: @color-f7;
          border-radius: 12px;
          .left {
            .img {
              width: 24px;
              height: 24px;
              border-radius: 8px;
              .icon {
                padding: 3px;
                width: 100%;
                height: 100%;
                overflow: clip;
                box-sizing: border-box;
                object-fit: contain;
                aspect-ratio: 1 / 1;
                background: @color-ff;
                border-radius: 4px;
              }
            }
            .name {
              margin-left: 8px;
              font-weight: 500;
              font-size: 14px;
              color: @font-color-14;
            }
          }
          .arrow {
            width: 24px;
            height: 24px;
          }
        }
        .tabs {
          margin-top: 12px;
          height: 36px;
          .tab {
            margin-right: 24px;
            font-weight: 400;
            font-size: 14px;
            color: @font-color-99;
          }
          .active {
            font-weight: 500;
            color: @theme-color;
          }
        }
        .list-main {
          width: 100%;
          height: 336px;
          .item {
            box-sizing: border-box;
            padding: 14px;
            margin-top: 12px;
            background: @color-f7;
            border-radius: 12px;
            cursor: pointer;
            border: 2px solid @color-f7;
            .name {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-14;
            }
            .desc {
              margin-top: 2px;
              font-size: 12px;
              color: @font-color-99;
            }
            .price {
              margin-top: 6px;
              .origin {
                margin-right: 6px;
                text-decoration: line-through;
                font-family: HelveticaNeue, HelveticaNeue;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-66;
              }
              .now {
                font-family: HelveticaNeue, HelveticaNeue;
                font-weight: bold;
                font-size: 16px;
                color: @theme-color;
              }
            }
          }
          .item:last-child {
            margin-bottom: 24px;
          }
          .item.active {
            background: @input-focus-bg;
            border: 2px solid @theme-color;
          }
          .item.disable {
            background: @color-f7;
            cursor: not-allowed;
            border: 2px solid @color-e5;
            .name {
              color: #b3b3b3;
            }
            .price {
              .origin {
                color: #b3b3b3;
              }
              .now {
                color: #b3b3b3;
              }
            }
          }
        }
      }
    }
  }
  .provider-drawer {
    left: 50%;
    width: 375px;
    transform: translateX(-50%);
    /deep/.el-drawer {
      height: 300px !important;
      border-radius: 16px 16px 0px 0px;
    }
    /deep/.el-drawer__header {
      display: none;
    }
    /deep/.el-drawer__body {
      overflow: hidden;
    }
    .provider-cont {
      border-radius: 16px 16px 0px 0px;
      .title {
        padding: 0 16px;
        height: 52px;
        .name {
          font-weight: 500;
          font-size: 16px;
          color: @font-color-14;
        }
        .icon {
          width: 20px;
          height: 20px;
        }
      }
      .content {
        height: 248px;
        .list-main {
          padding: 0 16px;
          padding-bottom: 24px;
          .item {
            margin-bottom: 12px;
            padding: 0 12px;
            height: 52px;
            background: @color-f7;
            border-radius: 10px;
            .img {
              width: 32px;
              height: 32px;
              .icon {
                padding: 4px;
                width: 100%;
                height: 100%;
                overflow: clip;
                box-sizing: border-box;
                object-fit: contain;
                aspect-ratio: 1 / 1;
                background: @color-ff;
                border-radius: 4px;
              }
            }
            .info {
              margin-left: 8px;
              .name {
                font-weight: 500;
                font-size: 13px;
                color: @font-color-14;
              }
              .fee {
                margin-top: 4px;
                font-size: 11px;
                color: @theme-color;
              }
            }
            .right {
              .checkbox {
                width: 16px;
                height: 16px;
              }
            }
          }
        }
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .mobile-recharge-list-page {
      .box-center {
        display: block;
        margin-bottom: 32px;
        .mode {
          box-sizing: border-box;
          width: 100%;
          padding: 16px 16px 8px 16px;
          .title {
            padding-bottom: 8px;
            border-bottom: @border-1-e5;
            .text {
              font-weight: 500;
              font-size: 20px;
              color: @font-color-14;
            }
            .text-pc {
              display: none;
            }
            .text-mobile {
              display: block;
            }
          }
          .label-item {
            display: none;
            margin-bottom: 16px;
            .line {
              width: 5px;
              height: 18px;
              background: @theme-color;
              border-radius: 4px;
            }
            .text {
              margin-left: 8px;
              font-weight: 500;
              font-size: 20px;
              color: @font-color-14;
            }
          }
        }
        .left {
          box-sizing: border-box;
          width: 100%;
          border-radius: 16px;
          .check {
            padding: 0px 16px;
            margin-top: 8px;
            .base {
              .info {
                display: none;
              }
            }
            .provider {
              display: none;
            }
            .provider-mobile {
              display: block;
              .provider-box {
                padding: 0 12px;
                height: 64px;
                background: @color-f7;
                border-radius: 8px;
              }
              .left {
                .img {
                  width: 44px;
                  height: 44px;
                  border-radius: 8px;
                  .icon {
                    padding: 6px;
                    width: 100%;
                    height: 100%;
                    overflow: clip;
                    box-sizing: border-box;
                    object-fit: contain;
                    aspect-ratio: 1 / 1;
                    background: @color-ff;
                    border-radius: 8px;
                  }
                }
                .info {
                  margin-left: 8px;
                  .name {
                    font-weight: 500;
                    font-size: 14px;
                    color: @font-color-14;
                  }
                  .sku {
                    margin-top: 4px;
                    font-size: 12px;
                    color: @font-color-66;
                  }
                }
              }
              .more {
                width: 24px;
                height: 24px;
              }
            }
            .desc {
              margin-top: 4px;
              font-weight: 400;
              font-size: 12px;
              color: @font-color-99;
            }
            .total-price {
              margin-top: 8px;
              display: block;
              .total-box {
                padding: 0 8px;
                height: 44px;
                .label {
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-14;
                }
                .text {
                  font-family: HelveticaNeue, HelveticaNeue;
                  font-weight: 500;
                  font-size: 20px;
                  color: @theme-color;
                }
              }
            }
          }
          .pay {
            display: none;
          }
        }
        .right {
          box-sizing: border-box;
          width: 100%;
          padding: 0 16px;
          margin-left: 0px;
          .mode {
            width: 100%;
            padding: 0px;
            margin-top: 18px;
            // height: 36px;
            background: @color-f7;
            border-radius: 12px 12px 0px 0px;
            .title {
              padding: 10px 12px;
              border-bottom: none;
              .text {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
                padding-bottom: 0px;
              }
            }
          }
          .pay {
            margin-top: 0px;
            padding: 20px 10px;
            background: @color-ff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 0px 0px 12px 12px;
            .title {
              display: none;
            }
            .pay-item {
              margin-top: 16px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .label {
                margin-bottom: 0px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .input {
                padding: 0;
                height: auto;
                background: @color-ff;
                border-radius: 8px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .total {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
            }
            .price-item {
              margin-top: 0px;
              display: none;
            }
            .country-item {
              display: block;
            }
            .pay-item:first-child {
              margin-top: 0;
            }
            .handle {
              display: none;
            }
          }
        }
      }
      .bottom-box {
        display: block;
        position: fixed;
        left: 50%;
        bottom: 0;
        width: 768px;
        height: 80px;
        transform: translateX(-50%);
        background: @color-ff;
        z-index: 55;
        box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
        .handle-box {
          margin-top: 20px;
          padding: 0 16px;
          .theme-btn {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
          }
        }
      }
    }
    .sku-drawer {
      width: 768px;
    }
    .provider-drawer {
      width: 768px;
    }
  }
  @media screen and (max-width: 767px) {
    .mobile-recharge-list-page {
      .box-center {
        display: block;
        margin-bottom: 32px;
        .mode {
          box-sizing: border-box;
          width: 100%;
          padding: 16px 16px 8px 16px;
          .title {
            padding-bottom: 8px;
            border-bottom: @border-1-e5;
            .text {
              font-weight: 500;
              font-size: 20px;
              color: @font-color-14;
            }
            .text-pc {
              display: none;
            }
            .text-mobile {
              display: block;
            }
          }
          .label-item {
            display: none;
            margin-bottom: 16px;
            .line {
              width: 5px;
              height: 18px;
              background: @theme-color;
              border-radius: 4px;
            }
            .text {
              margin-left: 8px;
              font-weight: 500;
              font-size: 20px;
              color: @font-color-14;
            }
          }
        }
        .left {
          box-sizing: border-box;
          width: 100%;
          border-radius: 16px;
          .check {
            padding: 0px 16px;
            margin-top: 8px;
            .base {
              .info {
                display: none;
              }
            }
            .provider {
              display: none;
            }
            .provider-mobile {
              display: block;
              .provider-box {
                padding: 0 12px;
                height: 64px;
                background: @color-f7;
                border-radius: 8px;
              }
              .left {
                .img {
                  width: 44px;
                  height: 44px;
                  border-radius: 8px;
                  .icon {
                    padding: 6px;
                    width: 100%;
                    height: 100%;
                    overflow: clip;
                    box-sizing: border-box;
                    object-fit: contain;
                    aspect-ratio: 1 / 1;
                    background: @color-ff;
                    border-radius: 8px;
                  }
                }
                .info {
                  margin-left: 8px;
                  .name {
                    font-weight: 500;
                    font-size: 14px;
                    color: @font-color-14;
                  }
                  .sku {
                    margin-top: 4px;
                    font-size: 12px;
                    color: @font-color-66;
                  }
                }
              }
              .more {
                width: 24px;
                height: 24px;
              }
            }
            .desc {
              margin-top: 4px;
              font-weight: 400;
              font-size: 12px;
              color: @font-color-99;
            }
            .total-price {
              margin-top: 8px;
              display: block;
              .total-box {
                padding: 0 8px;
                height: 44px;
                .label {
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-14;
                }
                .text {
                  font-family: HelveticaNeue, HelveticaNeue;
                  font-weight: 500;
                  font-size: 20px;
                  color: @theme-color;
                }
              }
            }
          }
          .pay {
            display: none;
          }
        }
        .right {
          box-sizing: border-box;
          width: 100%;
          padding: 0 16px;
          margin-left: 0px;
          .mode {
            width: 100%;
            padding: 0px;
            margin-top: 18px;
            // height: 36px;
            background: @color-f7;
            border-radius: 12px 12px 0px 0px;
            .title {
              padding: 10px 12px;
              border-bottom: none;
              .text {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
                padding-bottom: 0px;
              }
            }
          }
          .pay {
            margin-top: 0px;
            padding: 20px 10px;
            background: @color-ff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 0px 0px 12px 12px;
            .title {
              display: none;
            }
            .pay-item {
              margin-top: 16px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .label {
                margin-bottom: 0px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .input {
                padding: 0;
                height: auto;
                background: @color-ff;
                border-radius: 8px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .total {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
            }
            .price-item {
              margin-top: 0px;
              display: none;
            }
            .country-item {
              display: block;
            }
            .pay-item:first-child {
              margin-top: 0;
            }
            .handle {
              display: none;
            }
          }
        }
      }
      .bottom-box {
        display: block;
        position: fixed;
        left: 50%;
        bottom: 0;
        width: 375px;
        height: 80px;
        transform: translateX(-50%);
        background: @color-ff;
        z-index: 55;
        box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
        .handle-box {
          margin-top: 20px;
          padding: 0 16px;
          .theme-btn {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
